<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/common::NavHead('发布博客')"></head>
<body>
<!--导航条-->
<nav th:replace="admin/common::NavMenu"></nav>
<!--发布列表-->
<div class="ui pointing attached menu">
    <div class="ui container">
            <a href="" class="ui item  ">发布</a>
            <a href="" class="ui item active teal">列表</a>
    </div>
</div>
<!--中间部分-->
<div class="m-container-small m-padded-tb-big">
    <div class="ui container">
        <!--头部-->
        <div class="ui secondary segment form">
            <input type="hidden" name="page">

                <div class="fields inline">
                    <div class="field ">
                        <input type="text" name="title" placeholder="标题">
                    </div>
                    <div class="field">
                        <div class="ui selection dropdown">
                            <input type="hidden" name="typeId">
                            <i class="dropdown icon"></i>
                            <div class="default text">分类</div>
                            <div class="menu">
                                <div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}" th:text="${type.name}">错误日志</div>
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" id="recommend"   name="recommend">
                            <label for="recommend">推荐</label>
                        </div>
                        <div class="ui label button basic teal" id="search-btn">搜索</div>
                    </div>
                </div>

            <div id="table-container">
            <table th:fragment="blogList"  class="ui table">
                <thead>
                <tr>
                    <th></th>
                    <th>标题</th>
                    <th>类型</th>
                    <th>推荐</th>
                    <th>文本状态</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="blog,iterStat : ${page.content}">
                    <td th:text="${iterStat.count}">1</td>
                    <td th:text="${blog.title}">刻意练习清单</td>
                    <td th:text="${blog.type.name}">认知升级</td>
                    <td th:text="${blog.recommend} ? '是':'否'">是</td>
                    <td th:text="${blog.published} ? '发布':'草稿'">草稿</td>
                    <td th:text="${blog.updateTime}">2017-10-02 09:45</td>
                    <td>
                        <a href="#" th:href="@{/admin/blogs/{id}/input(id=${blog.id})}" class="ui mini teal basic button">编辑</a>
                        <a href="#" th:href="@{/admin/blogs/{id}/delete(id=${blog.id})}" class="ui mini red basic button">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <th colspan="10">
                        <div class="ui pagination menu" th:if="${page.totalPages>1}">
                            <a href="#" onclick="page(this)" th:attr="data-page=${page.number}-1" th:unless="${page.first}" class="item button mini">上一页</a>
                            <a href="#" onclick="page(this)" th:attr="data-page=${page.number}+1"  th:unless="${page.last}" class="item button mini">下一页</a>
                        </div>
                        <a href="/admin/blogs/input" class="ui teal basic button mini right floated">新增</a>
                    </th>
                </tr>
                </tfoot>
            </table>
            </div>
            <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
                <i class="close icon"></i>
                <div class="header">提示：</div>
                <p th:text="${message}">恭喜，操作成功！</p>
            </div>
        </div>
    </div>
</div>

<!--页脚-->
<footer th:insert="admin/common::NavFooter"></footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
<script type="text/javascript">
    $("#payButton").popup({
        popup:$(".payQR.popup"),
        on:'click',
        position:"bottom center"
    })
    $(".t_menu").click(function () {
        $(".m-item").toggleClass("m-mobile-hide");
    });
    $(".ui.dropdown").dropdown({
        on:"hover"
    });
    function loaddata() {
        $("#table-container").load(/*[[@{/admin/blogs/search}]]*/"/admin/blogs/search",{
            title : $("[name='title']").val(),
            typeId : $("[name='typeId']").val(),
            recommend : $("[name='recommend']").prop('checked'),
            page : $("[name='page']").val()
        });
    }

    function page(obj) {
        $("[name='page']").val($(obj).data("page"));
        loaddata();
    }
    $("#search-btn").click(function () {
        $("[name='page']").val(0);
        loaddata();
    });
    //消息提示关闭初始化
    $('.message .close')
        .on('click', function () {
            $(this)
                .closest('.message')
                .transition('fade');
        });


</script>
</html>